<!DOCTYPE html>
<!-- 引入公共部分 -->
{{extend './common/layout.html'}}
<!-- 引入css链接（填空） -->
{{block 'link'}}
<link rel="stylesheet" href="/static/home/css/add.css">
<script type="text/javascript" src="/static/home/js/add.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
{{/block}}
<!-- 引入主题部分（填空） -->
{{block 'main'}}
<!-- 引入头部代码 -->
<header>
    {{include './common/header.html'}}
    {{include './common/aside.html'}}
</header>
    <div class="top">
        <div class="back">新增商品</div>
        <div class="returnShop"><a href="./shopstage">返回</a></div>
    </div>
    <div class="body">
        <div class="uploadGood">
            <div class="upTop">1.基本信息</div>
            <div class="message">
                <div class="classify">
                    商品分类
                    <select name="code" size="1" class="select" id="type">
                        <option value="1">家电数码</option>
                        <option value="2">运动户外</option>
                        <option value="3">女装/男装/内衣</option>
                        <option value="4">女鞋/男鞋/箱包</option>
                        <option value="5">护肤/彩妆/个护</option>
                        <option value="6">母婴童装</option>
                        <option value="7">手表配饰</option>
                        <option value="8">居家用品</option>
                        <option value="9">唯品生活</option>
                        <option value="10">医药健康</option>  
                    </select>
                    <!-- <select name="code" size="1" class="select" id="type">
                        <option>女装/男装/内衣</option>
                        <option>女鞋/男鞋/箱包</option>
                        <option>护肤/彩妆/个护</option>
                        <option>运动户外</option>
                        <option>家电数码</option>
                        <option>母婴童装</option>
                        <option>手表配饰</option>
                        <option>居家用品</option>
                        <option>唯品生活</option>
                        <option>医药健康</option>  
                    </select> -->
                </div>
                <div class="classify">
                    商品品牌
                    <select name="code" size="1" class="select" id="brand">
                        <option value="1">飞利浦</option>
                        <option value="2">三星</option>
                        <option value="3">OPPO</option>
                        <option value="4">苹果</option>
                        <option value="5">小米</option>
                        <option value="6">中兴</option>
                        <option value="7">华为</option>
                        <option value="8">纽曼</option>
                        <option value="9">荣耀</option> 
                    </select>
                    <!-- <select name="code" size="1" class="select" id="type">
                        <option>女装/男装/内衣</option>
                        <option>女鞋/男鞋/箱包</option>
                        <option>护肤/彩妆/个护</option>
                        <option>运动户外</option>
                        <option>家电数码</option>
                        <option>母婴童装</option>
                        <option>手表配饰</option>
                        <option>居家用品</option>
                        <option>唯品生活</option>
                        <option>医药健康</option>  
                    </select> -->
                </div>
                <div class="goodTitle">
                    商品名称
                    <input type="text" class="name" id="name" name="name" maxlength="40" placeholder="请填写商品名称，不要超过40字">
                </div>
                <div class="goodIntro">
                    商品简介
                    <input type="text" class="name" id="goodIntroduction" name="name" maxlength="80" placeholder="请填写商品简介，不要超过80字">
                </div>
                <div class="goodPhoto">
                    商品封面
                    <div class="discribe">图片要求：宽高大于100px，大小在1M内&nbsp;&nbsp;<button onclick="clearCover()">重置</button></div>
                    <div class="photos">
                        <input id="ipt" type="file" onchange="previewFile()"> <!-- multiple 规定输入字段可接受多个值 -->
                        <div id="pre" class="inImg">
                            <img src="../../static/home/img/add.png" class="imgFir" id="oImg">
                        </div>
                    </div>
                </div>
                <div class="goodPhoto">
                    商品详情图
                    <div class="discribe">图片要求：宽高大于100px，大小在1M内，不可连续添加相同图片&nbsp;&nbsp;<button id="clear" onclick="clearList()">重置</button></div>
                    <div class="photos">
                        <input id="browse" type="file" onchange="previewFiles()" multiple> <!-- multiple 规定输入字段可接受多个值 -->
                        <img class="img" src="../../static/home/img/add.png">
                        <div id="preview"></div>
                    </div>
                </div>
                <!-- <div class="goodMessage">
                    商品详情
                    <div class="information">

                    </div>
                </div> -->
            </div>
            <div class="upTop">2.规格与信息</div>
            <div class="much">
                颜色尺寸
                <div class="specs" >
                    <div id="specs">
                        <div class="specsin" onchange="addSize()">
                            <div class="size">
                                <!-- <label class="lab">规格名称:</label>
                                <input class="goodname" type="text" placeholder="请输入规格名称(不可以超过30个字)" maxlength="30"> -->
                                <label class="lab">商品颜色:</label>
                                <input type="text" placeholder="请输入商品颜色" maxlength="10">
                                <label class="lab1">商品尺寸:</label>
                                <input type="text" placeholder="请输入商品尺寸" maxlength="10">
                                <button onclick="deleteSpec(this)">删除</button>
                            </div>
                        </div>
                    </div>
                    <button id="addSpec" onclick="addSpec(this)">+添加</button>
                </div>
                商品信息
                <div class="money">
                    <div class="moneyin">
                        <table id="table">
                            <thead class="thead" id="thead">
                                <tr>
                                    <th class="th1">名称</th>
                                    <th class="th2">款式</th>
                                    <th class="th3">预览图</th>
                                    <th class="th4">价格与库存</th>
                                    <th class="th5">操作</th>
                                </tr>
                            </thead>
                            <tbody id="tbody">
                                <tr>
                                    <td>
                                        <div class="sty">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="goodcolor">                          
                                        </div>
                                        <div class="goodsize">
                                        </div>
                                    </td>
                                    <td>
                                        <input type="file" class="putImg" onchange="goodspreviewFile(0)"/><br/>
                                        <div class="backImg" height="200">
                                            <img src="../../static/home/img/add.png" class="goodsbackImg">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="price"><input type="text" class="goodprice" placeholder="请输入价格"></div>
                                        <div class="stock"><input type="text" class="goodstock" placeholder="请输入库存"></div>
                                    </td>
                                    <td>
                                        <div class="takeOff">删除</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                商品规格
                <div class="specs" >
                    <div id="spec">
                        <div class="specsin">
                            <div class="sizeFir">
                                <label class="lab">规格名称:</label>
                                <input type="text" class="specname" placeholder="请输入规格名称">
                                <label class="lab1">规格内容:</label>
                                <input type="text" class="speccontent" placeholder="请输入规格内容">
                                <button onclick="deleteThisSpec(this)">删除</button>
                            </div>
                        </div>
                    </div>
                    <button id="addThisSpec" onclick="addThisSpec(this)">+添加规格</button>
                </div>
            </div>
            <div class="upTop">3.服务与承诺</div>
            <div class="service">
                <div class="form-group">
                    <label for="types">商品类型&nbsp;:&nbsp;</label>
                    <form class="types">
                      <input class="radio" type="radio" name="type" value="0"><span>二手商品&nbsp;&nbsp;</span>
                      <input class="radio" type="radio" name="type" value="1"><span>普通商品&nbsp;&nbsp;</span>
                      <input class="radio" type="radio" name="type" value="2"><span>潮流商品</span>
                    </form>
                </div>
                <div class="form-group">
                    <label for="types">运费情况&nbsp;:&nbsp;</label>
                    <form class="types">
                      <input class="radio" type="radio" name="type" value="0"><span>不包邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <input class="radio" type="radio" name="type" value="1"><span>包邮&nbsp;&nbsp;</span>
                    </form>
                </div>
                <div class="form-group">
                    <label for="types">退货换货&nbsp;:&nbsp;</label>
                    <form class="types">
                      <input class="radio" type="radio" name="type" value="0"><span>概不退货&nbsp;&nbsp;</span>
                      <input class="radio" type="radio" name="type" value="1"><span>可以退货&nbsp;&nbsp;</span>
                    </form>
                </div>
            </div>
            <div class="onsale">
                <button id="upMessage" onclick="uploadGood()">提交并上架</button>
                <button id="saveMessage">保存草稿</button>
            </div>
        </div>
    </div>
    <div class="float">
        <div id="floatContent" class="floatContent hide">
        </div>
    </div>
    {{/block}}